<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖站点分块划分管理示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce491dee0c6d78ea456bca232bca26be&plugin=AMap.CitySearch"></script>
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 13,
            center: [115.497342, 38.883209]
        });
// [115.48858045790001, 38.815004611546]
        // 创建配送区域
        function createDeliveryArea(points) {
            var polygon = new AMap.Polygon({
                path: points,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });
            polygon.setMap(map);
            return polygon; // 返回创建的多边形
        }

        // 添加站点标记
        function addStationMarker(position, options) {
            var marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(-10, -25),
                icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                ...options
            });
            marker.setMap(map);
        }

        // 添加骑手标记
        function addRiderMarker(position, options) {
            var marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(-10, -25),
                icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
                ...options
            });
            marker.setMap(map);
            return marker; // 返回创建的标记
        }

        // 更新骑手位置
        function updateRiderPosition(marker, newPosition) {
            marker.setPosition(newPosition);
        }

        // 定义配送区域坐标
        var deliveryAreaPoints = [
            [115.47, 38.86], // 左下角
            [115.51, 38.86], // 右下角
            [115.51, 38.90], // 右上角
            [115.47, 38.90]  // 左上角
        ];

        // 创建配送区域
        var deliveryArea = createDeliveryArea(deliveryAreaPoints);

        // 添加中心站点
        var centerStationPosition = [115.49, 38.88];
        addStationMarker(centerStationPosition, { title: '中心站点' });

        // 骑手位置数据
        var ridersPositions = [
            [115.48, 38.87], // 骑手1
            [115.50, 38.87], // 骑手2
            [115.49, 38.88], // 骑手3
            [115.50, 38.89], // 骑手4
            [115.48, 38.89]  // 骑手5
        ];

        // 添加骑手
        var ridersMarkers = ridersPositions.map(position => addRiderMarker(position, { title: '骑手' }));

        // 示例更新骑手位置
        setTimeout(function() {
            var updatedPositions = [
                [115.48, 38.875], // 骑手1的新位置
                [115.50, 38.875], // 骑手2的新位置
                [115.49, 38.885], // 骑手3的新位置
                [115.50, 38.895], // 骑手4的新位置
                [115.48, 38.895]  // 骑手5的新位置
            ];
            ridersMarkers.forEach((marker, index) => {
                updateRiderPosition(marker, updatedPositions[index]);
            });
        }, 3000);
    </script>
</body>
</html>